<template>
	<view v-if="activityList.length">
		<uni-group title="我发布的活动" mode="card" v-for="item in activityList" :key="item.id">
			<view class="top">
				<view class="user">
					<image :src="userInfo.avatarUrl" mode="cover"></image>
					<text>{{ userInfo.nickName }}</text>
				</view>
				<view class="tags">
					<view class="tag">{{ item.subThemeName }}</view>
					<view @click="dialogToggle(item.id)" class="del">删除</view>
				</view>
			</view>

			<view class="content">
				<view class="site">我在: {{ item.placeName }}</view>
				<uni-dateformat :date="JSON.parse(item.timeStamp)" format="MM月dd日 hh:mm"></uni-dateformat>
				<view class="desc">{{ item.actDescribe || '等你来聚!' }} </view>
			</view>
		</uni-group>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="关闭" confirmText="同意" title="警告" content="你确认要删除此项活动吗?"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	
	<view v-else>
		<uni-group title="我接收的活动" mode="card">
			<view class="content">您暂时未加入任何活动, 快去社区活动看看吧</view>
		</uni-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activityList: [],
			userInfo: {},
			currId: ''
		};
	},
	methods: {
		async getMyPublishActiveList() {
			const { data } = await uni.$http.get('/publish/findMyActivityList')
			if (data.code == 200) {
				this.activityList = data.activityList
				this.userInfo = data.userInfo
				console.log('我发布的活动列表', this.activityList);
			}
		},
		dialogToggle(id) {
			this.$refs.alertDialog.open()
			this.currId = id
		},
		dialogConfirm() {
			uni.$http.delete(`/publish/deleteActivity/${this.currId}`).then(() => {
				this.getMyPublishActiveList()
				uni.$showMsg('删除活动信息成功!')
			}).catch(err => {
				uni.$showMsg('删除活动信息失败!')
				console.log('删除活动失败', err);
			})
		},
	},
	onLoad() {
		this.getMyPublishActiveList()
	}
}
</script>

<style lang="less" scoped>
/deep/.uni-group__title .uni-group__title-text {
	font-size: 50rpx;
}

.top {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.user {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		font-weight: 700;
		max-width: 500rpx;
		overflow: hidden;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
		}
	}

	.tags {
		margin-top: -10rpx;

		.del,
		.tag {
			background-color: red;
			padding: 10rpx;
			color: white;
			border-radius: 10rpx;
		}

		.tag {
			margin-bottom: 10rpx;
			background-color: rgb(66, 185, 131);
		}
	}
}

.content {
	font-size: 50rpx;
	line-height: 90rpx;
	text-align: center;

	.desc {
		font-size: 40rpx;
	}

	/deep/ text {
		color: red;
		font-weight: 600;
	}
}
</style>
